<template>
  <lay-card>
    <lay-table
      :page="page"
      :height="'600px'"
      :columns="columns"
      :loading="loading"
      :data-source="dataSource"
      v-model:selected-keys="selectedKeys"
      @change="changePage"
      resize="true"
      autoColsWidth="true"
    >
      <template v-slot:operator="{ row }">
        <lay-button size="xs" type="primary">编辑</lay-button>
        <lay-button size="xs">查看</lay-button>
      </template>
    </lay-table>
  </lay-card>
</template>

<script lang="ts">
export default {
  name: "RecordSql"
}
</script>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {queryRecordCountApi, viewRecordSqlApi, viewRecordSqlCountApi} from "../../../api/module/scene";
import {layer} from "@layui/layer-vue";
import {notify} from "../../../untils/tip";

const route = useRoute();
const tables = reactive({data: {execute_id: ''}});

onBeforeMount(() => {
    const fullPath = route.fullPath;
    let params = fullPath.split('/');
    tables.data.execute_id = params[params.length - 1];
    console.log('Review data page : ', tables.data);
    getSqlRecordCount();
    viewSqls();
})

const page = reactive({ current: 1, limit: 10, total: 10 });
const selectedKeys = ref([]);

const columns = ref([]);
const dataSource = ref([]);
const loading = ref(false);

const getSqlRecordCount = async () => {
  let {result, status, message} = await viewRecordSqlCountApi({execute_id: tables.data.execute_id});
  if(status === 'success'){
      page.total = result.total;
  }else {
      notify(status, message);
  }
};

const changePage = () => {
    loading.value = true;
    setTimeout(() => {
      viewSqls();
      loading.value = false;
    }, 500);
};

const viewSqls = async () => {
  console.log('viewSqls:')
  const queryForm: any = reactive({execute_id: tables.data.execute_id});
  queryForm.current = page.current;
  queryForm.limit = page.limit;
  let {result, status, message} = await viewRecordSqlApi(queryForm);
  if(status === 'success'){
    columns.value = result.columns;
    dataSource.value = result.data_source;
  }else {
    notify(status, message)
  }
};

</script>

<style scoped>

</style>